<template>
  <div class="window-wrapper" ref="wrapper">

    <div class="window-header-wrapper">
      <h3 class="header-title">
        <i class="el-icon-s-home"></i>
        报表系统
      </h3>
      <el-button round @click="gotoAccountPage">账户管理</el-button>
    </div>
    <div class="window-body-wrapper" v-loading="loading">
      <div class="body-nav-wrapper">
        <div
          class="nav-item"
          v-for="item in platformList"
          :class="{active: navIndex === item.code}"
          :key="item.code"
          @click="setActiveIndex(item.code)"
        >
          {{item.message}}
        </div>
      </div>
      <div  class="body-content-wrapper">
        <div class="content-filter">
          <div class="filter-item">
            <span class="label">开始日期</span>
            <el-date-picker
              style="width: 170px"
              v-model="startDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="filter-item">
            <span class="label">结束日期</span>
            <el-date-picker
              style="width: 170px;"
              v-model="endDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="filter-item" v-if="navIndex === 5">
            <span class="label">币种</span>
            <el-select v-model="currency" style="width: 100px">
              <el-option value="1" label="人民币"></el-option>
              <el-option value="2" label="港币"></el-option>
            </el-select>
          </div>
          <el-button type="info" size="small" @click="onClickToday">今日</el-button>
          <el-button type="info" size="small" @click="onClickPrevDay">昨日</el-button>
          <el-button type="info" size="small" @click="onClickTomorrow">明日</el-button>
          <el-button type="info" size="small" @click="onClickPrevWeek">上周</el-button>
          <el-button type="info" size="small" @click="onClickCurrentWeek">本周</el-button>
        </div>
        <div class="group-btn-list">
          <el-button
            class="group-btn-item"
            @click="setGroupIndex(group.code)"
            :type="currentGroup === group.code ? 'info' : ''"
            v-for="(group) in allGroupList"
            :key="group.code"
            size="small"
          >
            {{group.alias}}
          </el-button>
          <el-button type="text" @click="goGroupPage">设置分组</el-button>
        </div>
        <div class="quick-btn-list">
          <el-button type="info" size="small" @click="getAllNewReport()">全部新款报表</el-button>
          <!-- <el-button type="info" size="small">全部旧款报表</el-button>
          <el-button type="info" size="small">全部非投报表</el-button> -->
          <!-- <el-button v-if="navIndex === 1" type="primary" size="small" @click="reGetAllFail()">重新请求失败的账号</el-button> -->
          <el-button type="primary" size="small" @click="reGetAllFail()">重新请求失败的账号</el-button>
          <el-button v-if="navIndex === 3" type="primary" size="small" @click="getAllMemberFee()">全部会费</el-button>
        </div>
        <!-- <div class="website-relate" v-if="showSetMenu"> -->
        <div class="website-relate">
          <span class="current-website">当前服务器: {{curWebsite}}</span>
          <el-button type="text" @click="setWebite">更新</el-button>
          <!-- <span class="current-set-btn" @click="setWebite">更新</span> -->
        </div>
        <div class="website-relate" v-if="navIndex === 8">
          <span class="current-website">当前搜索码: </span>
          <el-input size="mini" style="width: 200px" clearable placeholder="请输入搜索码" v-model.trim="currentSearchCode" @change="searchCodeChange" />
        </div>
        <div class="website-relate" v-if="navIndex === 9">
          <span class="current-website">当前搜索码: </span>
          <el-input size="mini" style="width: 200px" clearable placeholder="请输入搜索码" v-model.trim="xtCurrentSearchCode" @change="xtSearchCodeChange" />
        </div>
        <div class="website-relate" v-if="navIndex === 8">
          <span class="current-website">永盈登录地址: </span>
          <el-input size="mini" style="width: 320px" clearable placeholder="请输入搜索码" v-model.trim="loginLink" @change="loginLinkChange" />
        </div>
        <div class="website-relate" v-if="navIndex === 9">
          <span class="current-website">雄图登录地址: </span>
          <el-input size="mini" style="width: 320px" clearable placeholder="请输入搜索码" v-model.trim="xtLoginLink" @change="xtLoginLinkChange" />
        </div>
        <el-table size="small" :header-cell-style="{
          backgroundColor: '#757575',
          color: '#fff'
        }" :data="accountList" border style="width: 100%">
          <el-table-column prop="name" label="账户"></el-table-column>
          <el-table-column prop="level" label="等级">
            <template slot-scope="scope">
              <span>{{getLevelMessage(scope.row.level)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- <el-button size="small" @click="getNewReport(scope.row, i)">新款报表</el-button> -->
              <el-button size="small" @click="getNewReport(scope)">新款报表</el-button>
              <el-button style="margin: 0 5px;" v-if="navIndex === 3" size="small" @click="getMemberFee(scope)">会费</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="statusText" label="信息"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getCurrentDate } from '@/utils/index'
import commonMixin from './mixins/common'
import babaMixin from './mixins/platform-baba'
import firstMixin from './mixins/platform-first'
import isnMxin from './mixins/platform-isn'
import lijiMixin from './mixins/platform-liji'
import xgameMixin from './mixins/platform-xgame'
import ccMixin from './mixins/platform-cc'
import pingboMixin from './mixins/platform-pingbo'
import yontyingMixin from './mixins/platform-yongying'
import xiongtuMixin from './mixins/platform-xiongtu'
import { getLastWeekStart, getLastWeekEnd, getCurrentWeekStart, getCurrentWeekEnd } from '../../utils/time'
import {
  platformList, getAccountList,
  floatAccountList, getLevelMessage,
  setCurWebsite, getCurWebsite, baseUrl
} from '../common'
import { getGroupListByPlatform, getAllPlatformGroupList, initGroupAllGroupList, tryUpdatePlatformGroup } from '@/views/Group/group-help.js'

export default {
  name: 'HomePage',
  mixins: [
    commonMixin, firstMixin, babaMixin, isnMxin, lijiMixin,
    xgameMixin, ccMixin,
    pingboMixin, yontyingMixin,
    xiongtuMixin
  ],

  data () {
    return {
      platformList,
      allGroupList: [],
      currentGroup: -2,
      currency: '1',
      showSetMenu: false,
      show: false,
      startDate: '',
      endDate: '',
      loading: false,
      navIndex: 1,
      accountList: [],
      curWebsite: getCurWebsite() || baseUrl,
      exePath: '',
      outPutPath: '',
      waitExportList: [],
      errorList: []
    }
  },
  created () {
    this.startDate = getCurrentDate(24 * 60 * 60 * 1000 * -1)
    this.endDate = getCurrentDate()
  },
  activated () {
    const index = this.navIndex
    this.accountList = floatAccountList(getAccountList(index) || []).filter(e => e.level !== 9999)
    this.setGroupIndex(this.currentGroup)
    tryUpdatePlatformGroup()
    const data = getAllPlatformGroupList()
    if (!data) {
      console.log('go init')
      initGroupAllGroupList()
    }
    this.allGroupList = getGroupListByPlatform(index)
  },
  mounted () {
    setTimeout(() => {
      this.accountList = floatAccountList(getAccountList(this.navIndex) || []).filter(e => e.level !== 9999)
      this.watchSaveSuccess()
    }, 300)
  },
  computed: {
    currentLoginAccount () {
      return this.$store.state.currentLoginAccount
    },
    webviewsite () {
      const index = this.navIndex
      if (index === 6) {
        // cc
        return 'https://bz66ms.ccdior.com'
      }
      if (index === 7) {
        // 永盈
        return 'https://www.tt33aa.com'
      }
      if (index === 8) {
        // 小白
        return 'https://ag.iba228.com/'
      }
      return ''
    }
  },

  methods: {
    webviewLoad () {
      console.log('webview load !!!')
      this.loading = false
      const webview = document.querySelector('#webview')
      // webview.contentWindow.document.querySelector('.Id').value = 1234
      console.dir(webview)
      window.webview = webview
    },
    getLevelMessage,
    goGroupPage () {
      this.$router.push({
        name: 'Group'
      })
    },
    setGroupIndex (code) {
      this.currentGroup = code
      const list = floatAccountList(getAccountList(this.navIndex) || []).filter(e => e.level !== 9999)
      // 所有
      if (code === -2) {
        this.accountList = list
        return
      }
      // 未分组
      if (code === -1) {
        this.accountList = list.filter(e => !e.group)
        return
      }
      this.accountList = list.filter(e => {
        return Number(e.group) === Number(code)
      })
    },
    getChilren (data = []) {
      const result = []
      for (let i = 0; i < data.length; i++) {
        const item = data[i]
        result.push({ name: item.name })
        if (item.children) {
          result.push(...this.getChilren(item.children))
        }
      }
      return result
    },
    getNewReport (scope) {
      const { row, $index } = scope
      switch (this.navIndex) {
        case 1:
          this.getFirstItemData(row, $index)
          break
        case 2:
          this.getBabaItemData(row, $index)
          break
        case 3:
          this.getIsnItemData(row, $index)
          break
        case 4:
          this.getLijiItemData(row, $index)
          break
        case 5:
          this.getXgameItemData(row, $index)
          break
        case 6:
          this.getCcItemData(row, $index)
          break
        case 7:
          this.getPingboItemData(row, $index)
          break
        case 8:
          this.getYongyingItemData(row, $index)
          break
        case 9:
          this.getXiongtuItemData(row, $index)
      }
    },
    reGetAllFail () {
      const errorList = this.errorList
      this.errorList = []
      if (errorList && errorList.length) {
        const list = [...errorList]
        console.log('fail list: ', list)
        console.log('fail list len: ', list.length)
        this.getAllNewReport(list)
      } else {
        this.$message.info('没有待重新请求的账号')
      }
    },
    getAllNewReport (reGetList = undefined) {
      this.errorList = []
      switch (this.navIndex) {
        case 1:
          this.getAllFirstData(reGetList)
          break
        case 2:
          this.getBabaAllData(reGetList)
          break
        case 3:
          this.getAllIsnItemData(reGetList)
          break
        case 4:
          this.getAllLijiItemData(reGetList)
          break
        case 5:
          this.getAllXgameItemData(reGetList)
          break
        case 6:
          this.getAllCcItemData(reGetList)
          break
        case 7:
          this.getAllPingboData(reGetList)
          break
        case 8:
          this.getAllYongyingData(reGetList)
          break
        case 9:
          this.getAllXiongtuData(reGetList)
          break
      }
    },
    watchSaveSuccess () {
      const { ipcRenderer } = require('electron')
      ipcRenderer.on('write-success', () => {
        this.$message.success('保存成功')
      })
    },
    setWebite () {
      this.$prompt('请输入新的地址', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        inputValue: this.curWebsite
      }).then(({ value }) => {
        this.curWebsite = value
        setCurWebsite(value)
        this.$message({
          type: 'success',
          message: '更新成功'
        })
      }).catch(() => {
      })
    },
    setActiveIndex (i) {
      this.navIndex = i
      this.accountList = floatAccountList(getAccountList(this.navIndex) || []).filter(e => e.level !== 9999)
      this.allGroupList = getGroupListByPlatform(i)
      this.loading = true

      // 重新请求相关逻辑，选择新tab重置
      this.errorList = []
      this.waitExportList = []
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    notify () {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    gotoAccountPage () {
      this.$router.push('/account?platform=' + this.navIndex)
    },
    onClickToday () {
      const start = new Date().toLocaleDateString().split('/').map(e => e.length < 2 ? '0' + e : e).join('-')
      const end = new Date().toLocaleDateString().split('/').map(e => e.length < 2 ? '0' + e : e).join('-')
      this.startDate = start
      this.endDate = end
    },
    onClickPrevDay () {
      const start = getCurrentDate(24 * 60 * 60 * 1000 * -1)
      const end = start
      this.startDate = start
      this.endDate = end
    },
    onClickTomorrow () {
      const start = getCurrentDate(24 * 60 * 60 * 1000)
      const end = start
      this.startDate = start
      this.endDate = end
    },
    onClickPrevWeek () {
      this.startDate = getLastWeekStart()
      this.endDate = getLastWeekEnd()
    },
    onClickCurrentWeek () {
      this.startDate = getCurrentWeekStart()
      this.endDate = getCurrentWeekEnd()
    },
    onClickNextWeek () {
      this.notify()
    }
  }
}
</script>

<style lang="stylus" scoped>
>>> .el-button+.el-button {
  margin-left: 2px;
}
</style>

<style lang="stylus" scoped>
.window-header-wrapper {
  .header-title {
    color: #585858;
  }
}
.website-relate {
  padding: 4px 0;
  .current-website {
    margin-right: 5px;
  }
  .current-set-btn {
    color: blue;
    cursor pointer;
  }
}
.window-wrapper {
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: #fff;
}

.window-header-wrapper {
  display: flex;
  padding: 10px 15px;
  background-color: #f2f2f2;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #999;
}

.window-header-wrapper .account-btn {
  font-size: 14px;
  padding: 6px 10px;
  background-color: #555;
  color: #fff;
  border-radius: 6px;
  user-select: none;
}

.window-header-wrapper .account-btn:hover {
  cursor: pointer;
}

.window-body-wrapper {
  display: flex;
}

.body-content-wrapper {
  padding: 10px;
}

.content-filter {
  display: flex;
  align-items center;
}

.content-filter .filter-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.content-filter .filter-item .label {
  margin-right: 10px;
  font-size: 14px;
  color: #585858;
}

.content-filter .filter-btn {
  margin-right: 4px;
  padding: 4px;
  text-align: center;
  background-color: #777;
  color: #f2f2f2;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

.body-nav-wrapper {
  width: 100px;
  min-height: calc(100vh - 52px);
  background-color: #f2f2f2;
}

.body-nav-wrapper .nav-item {
  min-width: 100px;
  padding: 12px 0;
  text-align: center;
  cursor: pointer;
}

.body-nav-wrapper .nav-item.active {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.quick-btn-list {
  display: flex;
  margin: 10px 0;
}

.group-btn-list {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
  .group-btn-item {
    margin-right: 4px;
    margin-left: 0;
    margin-bottom: 6px;
  }
}

.quick-btn-list .quick-btn-item {
  padding: 4px 6px;
  margin-right: 4px;
  background-color: #777;
  color: #f2f2f2;
  border-radius: 4px;
  cursor: pointer;
}

.body-content-wrapper {
  flex: 1;
}

.content-table {
  padding: 0;
  margin: 0;
  border: 0;
  background-color: #ccc;
}

.content-table td {
  background-color: #ffffff;
  padding: 10px 0;
}

.content-table tr {
  text-align: left;
  height: 30px;
  text-indent: 10px;
}

.content-table .operation-btn {
  padding: 4px;
  margin-right: 4px;
  background-color: #777;
  color: #f2f2f2;
  border-radius: 4px;
  cursor: pointer;
}
</style>
